<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>{$reply['title']}——3D签到</title>
    <link rel="stylesheet" href="../addons/haoman_dpm/img3/common.css">
    <link rel="stylesheet" href="../addons/haoman_dpm/img3/style.css?V=42343">
    <script type="text/javascript">
   
    window.signEffect = {
        {if $reply['isqdthemes']==0} "table": true {/if}
        {if $reply['isqdthemes']==1} "sphere": true {/if}
        {if $reply['isqdthemes']==2}"helix": true {/if}
        {if $reply['isqdthemes']==3} "grid": true {/if}
    };
    var arrfiles = [
{loop $list $row}
    {
        "head": "{php echo tomedia($row['avatar'])}",
        "id": {$row['id']},
        "nickname": "{$row['nickname']}",
    }, 

{/loop} 

    ]
    

    </script>
    {if $reply['qdthemes']==0}
    <script type="text/javascript" src="../addons/haoman_dpm/img3/arrfiles.js"></script>
    {else}
    <script type="text/javascript">
        while (arrfiles.length < 186) {
            arrfiles.push({
                "head": "../addons/haoman_dpm/img3/3d_default.jpg",
                "nickname": "会议用户",
                "isEmpty": true
            });
        }
    </script>
    {/if}
    <style type="text/css">
        body{
            background: url({$bg}) center center / 100% 100%; 
            user-select: none;
        }

    </style>
</head>

<body>
    <a title="返回大屏幕" style="position: absolute;bottom: 50px;left: 55px;z-index: 11;" href="{if $reply['timenum'] == 0}{php echo $this->createMobileUrl('dpm_index',array('rid'=>$rid))}{else}{php echo $this->createMobileUrl('dpm_messages',array('rid'=>$rid))}{/if}"><img alt="" src="../addons/haoman_dpm/img3/btn_return.png" style="display: block;"> </a>
    <a id="ewmShow" title="二维码显示" style="position: absolute;top: 50px;right: 55px;z-index: 11;" href="javascript:void(0);"><img alt="" src="{php echo tomedia($reply['up_qrcode'])}" style="display: block;width: 80px;height: 80px;"> </a>
    <script type="text/javascript">
    //判断浏览器类型
    var Sys = {};
    var ua = navigator.userAgent.toLowerCase();
    var s;
    (s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1]:
        (s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :
        (s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :
        (s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :
        (s = ua.match(/micromessenger.([\d.]+)/)) ? Sys.micromessenger = s[1] :
        (s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;
    if (!(Sys.chrome || Sys.firefox || Sys.safari || Sys.micromessenger)) { //Js判断为谷歌chrome、火狐firefox浏览器、苹果safari
        document.write('</br><font size="1" color="white">查看3D效果请使用：谷歌chrome、火狐firefox，苹果safari或微信</font>');
    }
    </script>
    <div class="container" id="container">
        <div class="btn_menu" style="display: block;position: absolute;z-index: 11;">
            <a href="{php echo $this->createMobileUrl('dpm_3dqd',array('rid'=>$rid,'isqdthemes'=>'table'))}" style="background: rgba(0,0,0,0.5);padding: 5px 10px;border-radius: 5px;margin: 5px;color: #fbf5be;font-size: 11px;" id="table">照片墙</a>
            <a href="{php echo $this->createMobileUrl('dpm_3dqd',array('rid'=>$rid,'isqdthemes'=>'sphere'))}" style="background: rgba(0,0,0,0.5);padding: 5px 10px;border-radius: 5px;margin: 5px;color: #fbf5be;font-size: 11px;" id="sphere">水晶球</a>
            <a href="{php echo $this->createMobileUrl('dpm_3dqd',array('rid'=>$rid,'isqdthemes'=>'helix'))}" style="background: rgba(0,0,0,0.5);padding: 5px 10px;border-radius: 5px;margin: 5px;color: #fbf5be;font-size: 11px;" id="helix">螺旋塔</a>
            <a href="{php echo $this->createMobileUrl('dpm_3dqd',array('rid'=>$rid,'isqdthemes'=>'grid'))}" style="background: rgba(0,0,0,0.5);padding: 5px 10px;border-radius: 5px;margin: 5px;color: #fbf5be;font-size: 11px;" id="grid">展览厅</a>
            <button style="background: rgba(0,0,0,0.5);padding: 5px 10px;border-radius: 5px;margin: 5px;color: #fbf5be;" id="full">全屏展示</button>
            <button style="background: rgba(0,0,0,0.5);padding: 5px 10px;border-radius: 5px;margin: 5px;color: #fbf5be;display: none" id="exitFull">退出全屏</button>
            <button class="on" style="background: rgba(0,0,0,0.5);padding: 5px 10px;border-radius: 5px;margin: 5px;color: #fbf5be;" onclick="lanren.changeClass(this,'media')" id="audio-btn">关闭声音</button>
        </div>
        <div style="overflow: hidden; transform-style: preserve-3d; perspective-origin: 50% 50%; width: 1440px; height: 732px; position: absolute; perspective: 1160.8px;">
            <div style="transform-style: preserve-3d; width: 1440px; height: 732px; transform: translate3d(0px, 0px, 1160.8px) matrix3d(0.964535, 0, -0.263956, 0, 0, -1, 0, 0, 0.263956, 0, 0.964535, 0, -6.34045e-06, 0, -2728.38, 1) translate3d(720px, 366px, 0px);">
            </div>
        </div>
    </div>
    <script type="text/javascript" src="../addons/haoman_dpm/img3/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../addons/haoman_dpm/img3/lightbox-2.6.min.js"></script>
    <script type="text/javascript" src="../addons/haoman_dpm/img3/three.min.js"></script>
    <script type="text/javascript" src="../addons/haoman_dpm/img3/tween.min.js"></script>
    <script type="text/javascript" src="../addons/haoman_dpm/img3/TrackballControls.js"></script>
    <script type="text/javascript" src="../addons/haoman_dpm/img3/CSS3DRenderer.js"></script>
    <script type="text/javascript" src="../addons/haoman_dpm/img3/3d-sign.js"></script>
    <script type="text/javascript" src="../addons/haoman_dpm/img/jquery.cookie.js"></script>
    <script>
    var lanren = {
        changeClass: function (target,id) {
            var className = $(target).attr('class');
            var ids = document.getElementById(id);
            (className == 'on')
                ? $(target).removeClass('on').addClass('off')
                : $(target).removeClass('off').addClass('on');
            (className == 'on')
                ? ids.pause()
                : ids.play();
            (className == 'on')
                ? $("#audio-btn").html("开启声音")
                : $("#audio-btn").html("关闭声音");
        },
        play:function(){
            document.getElementById('media').play();
        }
    }
    lanren.play();

    </script>


    <script type="text/javascript">
    window.isAnimating = false;
    window.overLimit = {if $overLimit == 0}false{else}true{/if};
    window.limitSize = {$limitSize};
    window.wallLimit = 186;
    // window.start3D = 0;

    function getLastTotal() {
        var result = arrfiles.length;

        for (var i = 0; i < arrfiles.length; i++) {
            if (arrfiles[i].isEmpty) {
                result = i;
                break;
            }
        }
        if (window.overLimit) {
            result = arrfiles.length + limitSize;
        }
        // alert(result);

        return result;
    }

    function animHead(index) {
        window.isAnimating = true;
        var $element = $(objects[index].element);
        var objData = arrfiles[index];
        if (objData.isNeedAnimate) {
            $element.find(">a").click();
            setTimeout(function() {
                $(".lightboxOverlay").click();
                var newSrc = $element.find(">a>img").attr("data-newsrc");
                $element.find(">a>img").attr("src", newSrc);
                $element.find(">a").addClass("a-ring");
                objData.isNeedAnimate = false;
                var nextIndex = index + 1;
                if (nextIndex >= arrfiles.length) {
                    nextIndex = 0;
                }
                var nextObj = arrfiles[nextIndex];
                if (nextObj.isNeedAnimate) {
                    setTimeout(function() {
                        animHead(index + 1);
                    }, 1200);
                } else {
                    window.isAnimating = false;
                }
            }, 2500);
        }
    }
    $(function() {

{if $reply['isqd']==0}
    var old_EffectIndex = 0;
    
    setInterval(function() {

        var EffectIndex = Math.floor(Math.random()*4);

        if(EffectIndex == old_EffectIndex){
            EffectIndex = EffectIndex - 1;
        }
        if(EffectIndex<0){
            EffectIndex = 3;
        }
            
        if(EffectIndex == 1){
            transform(targets.table, 2000)
        }else if(EffectIndex == 2){
            transform(targets.sphere, 2000)
        }else if(EffectIndex == 3){
            transform(targets.helix, 2000)
        }else{
            transform(targets.grid, 2000)
        }

        old_EffectIndex = EffectIndex;

    }, 12000);
{/if}



        $("#ewmShow").click(function() {
            $("#ewm").show();
            $("#ewmimg").show();
        });

        $("#ewmimg").click(function() {
            $("#ewm").hide();
            $("#ewmimg").hide();
        });

        //定时轮询后台签到信息
        var stop = false
        setInterval(function() {
            // var t = getLastTotal();
            // alert(t);
            // alert(window.limitSize);
            

            if (stop) return;
            stop = true;
            $.get('{php echo $this->createMobileUrl('dpm_get3dqd',array('rid'=>$rid))}', {
                lastTotal: getLastTotal()
            }, function(data) {

                // alert(data.msg)
                
                if (data.ret == 0) {
                    var total = data.model.total;
                    var record = data.model.record;
                    var o_lastTotal = getLastTotal();
                    var animateIndex = getLastTotal() % window.wallLimit;
                    for (var i = 0; i < record.length; i++) {
                        var r = record[i];
                        var lastTotal = getLastTotal() % window.wallLimit;
                        arrfiles[lastTotal].isEmpty = false;
                        arrfiles[lastTotal].isNeedAnimate = true;
                        var $element = $(objects[lastTotal].element);
                        var headImgUrl = r.avatar ? r.avatar : ('../addons/haoman_dpm/img3/3d_default.jpg');
                        var bigImg = headImgUrl;
                        if (headImgUrl.endsWith("/132")) {
                            bigImg = headImgUrl.substring(0, headImgUrl.lastIndexOf("/")) + "/0";
                        }
                        var image = $element.find(">a>img")[0];
                        image.addEventListener('load', function(event) {
                            resizeImg(this, 120, 120);
                        }, false);
                        $element.find(">a").attr("href", bigImg).attr("title", r.nickname).append("<img src='" + headImgUrl + "' style='display:none;'/>");
                        $element.find(">a>img").attr("data-newsrc", headImgUrl);
                    }
                    if (!window.isAnimating && record.length > 0) {
                        animHead(animateIndex);
                    }
                    if (window.overLimit) {
                        window.limitSize += record.length;
                    } else if ((record.length + o_lastTotal) > window.wallLimit) {
                        window.overLimit = true;
                        window.limitSize = (record.length + o_lastTotal) - wallLimit;
                    }
                }
                stop = false;
            }, "json");
        }, 5000);
    });


    $("#full").click(function() {
        $("#full").hide();
        $("#exitFull").show();
        h()
    });

    $("#exitFull").click(function() {
        $("#exitFull").hide();
        $("#full").show();
        b()
    });



    function h() {
        var j = document.documentElement,
            k = j.requestFullScreen || j.webkitRequestFullScreen || j.mozRequestFullScreen || j.msRequestFullScreen,
            l;
        if (typeof k != "undefined" && k) {
            k.call(j);
            return
        }
        if (typeof window.ActiveXObject != "undefined") {
            l = new ActiveXObject("WScript.Shell");
            if (l) {
                l.SendKeys("{F11}")
            }
        }
    }

    function b() {
        var k = document,
            j = k.cancelFullScreen || k.webkitCancelFullScreen || k.mozCancelFullScreen || k.exitFullScreen,
            l;
        if (typeof j != "undefined" && j) {
            j.call(k);
            return
        }
        if (typeof window.ActiveXObject != "undefined") {
            l = new ActiveXObject("WScript.Shell");
            if (l != null) {
                l.SendKeys("{F11}")
            }
        }
    }

$(document).keydown(function(e){
    if(e.which == 81) {
        if($("#full").is(":hidden")){
                b();
                $("#exitFull").hide();
                $("#full").show();
            }else{
                h();
                $("#full").hide();
                $("#exitFull").show();
            }
    }
    if(e.which == 87) {
        location.href="{php echo $this->createMobileUrl('dpm_index',array('rid'=>$rid))}"
    }
    if(e.which == 69) {
        if($("#ewm").is(":hidden")){
            $("#ewm").show();
            $("#ewmimg").show();
        }else{
            $("#ewm").hide();
            $("#ewmimg").hide();
        }
    }
    if(e.which == 82) {
        location.href="{php echo $this->createMobileUrl('dpm_messages',array('rid'=>$rid))}"
    }
    if(e.which == 84) {
        location.href="{php echo $this->createMobileUrl('dpm_3dqd',array('rid'=>$rid))}"
    }
    if(e.which == 89) {
        location.href="{php echo $this->createMobileUrl('dpm_choujiang',array('rid'=>$rid))}"
    }
    if(e.which == 83) {
        location.href="{php echo $this->createMobileUrl('dpm_qianghongbao',array('rid'=>$rid))}"
    }
    if(e.which == 71) {
        location.href="{php echo $this->createMobileUrl('dpm_jiabing',array('rid'=>$rid))}"
    }
    if(e.which == 90) {
        location.href="{php echo $this->createMobileUrl('dpm_index',array('rid'=>$rid,'themes'=>1))}"
    }
    if(e.which == 88) {
        lanren.changeClass('#audio-btn','media');
    }
});


    </script>
    <div id="ewm" class="lightboxOverlay" style="width:100% ; height: 100%; display: none;"></div>
    <div id="ewmimg" class="lightbox" style="display: none; top: 90px; left: 0px;">
        <div class="lb-outerContainer" style="width: 530px; height: 570px;">
            <div class="lb-container">
            <img class="lb-image" src="{php echo tomedia($reply['up_qrcode'])}" style="display: block; width: 520px; height: 520px;">
               <p>
                {if empty($reply['qrcodedec'])}
                使用微信扫描以下任意二维码，发送关键词{$keywords['keywords'][0]['content']}既可以签到
                {else}
                {$reply['qrcodedec']}
                {/if}
                </p>
            </div>
        </div>
    </div>
    <audio src="{$music}" id="media" preload="auto" autoplay="autoplay" loop="loop"></audio>
</body>

</html>
